<template>
    <div class="heroslist">
        <h1>英雄列表</h1>
        
        <ul>
            <li v-for="item in herosList" :key="item.id">

                <!-- 第一种形式： 路由传递 params 参数 -->
                <!-- <router-link :to="`/herocon/${item.id}/${item.name}`">
                    <img :src="`http://cdn.xiaohigh.com${item.image}`" alt="">
                    <h3>{{ item.name }}</h3>
                </router-link> -->

                 <!-- 第二种形式： 路由传递 params 参数 -->
                 <!-- <router-link :to="{
                    name:'herocon',
                    params:{
                        id:item.id
                    }
                 }">
                    <img :src="`http://cdn.xiaohigh.com${item.image}`" alt="">
                    <h3>{{ item.name }}</h3>
                </router-link> -->


                <!-- 第一种形式：路由传递 query 参数 -->
                <!-- <router-link :to="`/herocon?id=${item.id}&name=${item.name}`">
                    <img :src="`http://cdn.xiaohigh.com${item.image}`" alt="">
                    <h3>{{ item.name }}</h3>
                </router-link> -->

                  <!-- 第二种形式：路由传递 query 参数 -->
                  <!-- <router-link :to="{
                        name:'herocon',
                        query:{
                            id:item.id,
                            name:item.name
                        }
                  }">
                    <img :src="`http://cdn.xiaohigh.com${item.image}`" alt="">
                    <h3>{{ item.name }}</h3>
                </router-link> -->


                <!-- <router-link :to="{
                        path:'/herocon',
                        query:{
                            id:item.id,
                            name:item.name
                        }
                  }">
                    <img :src="`http://cdn.xiaohigh.com${item.image}`" alt="">
                    <h3>{{ item.name }}</h3>
                </router-link> -->


                <div @click="toHeroCon(item.id,item.name)"> 
                    <img :src="`http://cdn.xiaohigh.com${item.image}`" alt="">
                    <h3>{{ item.name }}</h3>
                </div>

            </li>
        </ul>
    </div>
</template>

<script>
    export default {
        name:"HeroList",
        data(){
            return{
                herosList:[]
            }
        },
        props:{
            keyword:{
                type:String,
                required:true
            },
            value:String
        },
        async mounted(){
            let {data} = await this.$axios.get("http://api.xiaohigh.com/heros");
            // console.log(data);
            //赋值
            this.herosList = data;
        },
        watch:{
            async keyword(){
                let {data} = await this.$axios.get("http://api.xiaohigh.com/heros",{
                    params:{
                        name_like:this.keyword
                    }
                })

                //赋值
                this.herosList = data;
            }
        },
        methods:{
            toHeroCon(id,name){
                //写js逻辑

                // console.log(this);
                // this.$router.push(`/herocon?id=${id}`);

                // this.$router.push({
                //     name:"herocon",
                //     query:{
                //         id,
                //         name
                //     }
                // })

                // this.$router.push({
                //     path:"/herocon",
                //     query:{
                //         id,
                //         name
                //     }
                // })

                //替换模式
                this.$router.replace({
                    name:"herocon",
                    params:{
                        id,
                        name
                    }
                })

            }
        }
        
    }
</script>

<style scoped>

.heroslist h1{
    text-align: center;
    color: goldenrod;
}
.heroslist ul{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
}

.heroslist ul li{
    margin: 20px;
    text-align: center;
}

.heroslist ul li img{
    width: 100px;
    height: 100px;
    border-radius: 50%;
}
</style>